<template>
  <!-- 商品列表 -->
  <view class="list">
    <view class="item" v-for="(item, index) in cartList" :key="index">
      <view class="left">
        <checkbox-group @change="checkboxChange($event,item.recyclableOrderId)">
          <checkbox color="#43a246" style="transform:scale(0.7)" :value="item.recyclableOrderId" :checked="item.flag" />
        </checkbox-group>
      </view>
      <image :src="item.image"></image>
      <view class="cont">
        <view class="tls">{{item.recyclableName}}</view>
        <view class="price">单价：{{item.recyclablePrice}}元/斤</view>
        <view class="num">重量：{{item.recyclableWeight}}斤</view>
        <view class="num">状态：{{item.recyclableStatus="0"?"完好":"缺损"}}</view>
      </view>
      <view class="number">
      </view>
    </view>
  </view>
  <!-- 底部 -->
  <view class="bottom">
    <view class="left">
      <view class="all">
        <checkbox-group @change="checkboxChangeAll">
          <checkbox color="#43a246" style="transform:scale(0.7)" :checked="isAllChecked" />
        </checkbox-group>
      </view>
      <view class="totalPrice">总价：<text>￥{{totalPrice}}元</text></view>
    </view>
    <view class="submitOrder" @tap="submitOrder">提交订单</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        totalPrice: 0,
        isAllChecked: false,
        goods: [],
        cartList: [],
        shopId: '',
        recyclableOrderIdList: [],
      };
    },
    onLoad() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + "/getRecyclableCartOrders",
        // url: "http://localhost:8080/getRecyclableCartOrders",
        method: 'POST',
        data: {
          userId: uni.getStorageSync("userId"),
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          that.cartList = res.data
          for (let i = 0; i < that.cartList.length; i++) {
            that.cartList[i]["flag"] = 0
          }
        }
      })
    },
    onShow() {
      const that = this
      uni.request({
        url: getApp().globalData.baseUrl + "/getRecyclableCartOrders",
        // url: "http://localhost:8080/getRecyclableCartOrders",
        method: 'POST',
        data: {
          userId: uni.getStorageSync("userId"),
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success(res) {
          that.cartList = res.data
          for (let i = 0; i < that.cartList.length; i++) {
            that.cartList[i]["flag"] = 0
          }
        }
      })
    },
    methods: {
      // 单个选择
      checkboxChange(e, recyclableOrderId) {
        const that = this
        var temp = []
        // 找到被修改的商品对象
        let index = that.cartList.findIndex(v => v.recyclableOrderId === recyclableOrderId)
        // 选中状态取反
        that.cartList[index].flag = !that.cartList[index].flag
        temp = that.cartList.every(v => v.flag)
        // console.log(temp)
        if (temp) {
          that.isAllChecked = true
        } else {
          that.isAllChecked = false
        }
        that.setCart()
      },
      // 全选
      checkboxChangeAll(e) {
        const that = this
        that.isAllChecked = !that.isAllChecked
        that.cartList.forEach(v => v.flag = that.isAllChecked)
        that.setCart()
      },
      //计算总价
      setCart() {
        const that = this
        let totalPrice = 0
        let goods = []
        that.goods = []
        that.cartList.forEach(v => {
          if (v.flag) {
            totalPrice += v.recyclableWeight * v.recyclablePrice
            that.goods.push(v)
          }
        })
        that.totalPrice = Math.round(totalPrice * 100) / 100
      },

      submitOrder() {
        const that = this
        if (that.goods.length == 0) {
          uni.showModal({
            title: '提示',
            content: '请选择需要购买的商品',
            success(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
          // that.$tips('请选择需要购买的商品')
          return

        }
        for (let i = 0; i < that.goods.length; i++) {
          console.log(that.goods[i])
          that.recyclableOrderIdList.push(that.goods[i].recyclableOrderId)
        }
        console.log(that.recyclableOrderIdList)
        uni.request({
          method: 'POST',
          url: getApp().globalData.baseUrl + "/submitRecyclableOrder",
          // url: "http://localhost:8080/submitRecyclableOrder",
          data: {
            recyclableOrderIdList: that.recyclableOrderIdList,
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          success: (res) => {
            uni.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
            })
          }
        });
      },

    }
  }
</script>

<style lang="scss" scoped>
  .cart_page {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #F2F2F2;
    overflow: auto;
  }

  image {
    height: 200rpx;
    width: 200rpx;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 25rpx;
    background-color: #ffffff;
    border-top: #cccccc;
    box-shadow: 0 0 12rpx #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .left {
    display: flex;
    align-items: center;
  }

  .totalPrice {
    color: #666666;
    font-size: 28rpx;
  }

  text {
    color: #43a246;
    font-size: 32rpx;
  }

  .submitOrder {
    width: 200rpx;
    border-radius: 70rpx;
    height: 70rpx;
    line-height: 70rpx;
    color: #ffffff;
    text-align: center;
    font-size: 28rpx;
    background-color: #43a246;
  }


  .list {
    padding: 40rpx 25rpx;
  }

  .item {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .cont {
    width: calc(100% - 280rpx);
  }

  .tls {
    // font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .price {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    padding: 6rpx 0;
  }

  .num {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }



  .number text {
    width: 50rpx;
    line-height: 50rpx;
    text-align: center;
    display: inline-block;
    background-color: #f1f1f1;
    margin-right: 5rpx;
  }

  .number .add {
    color: #43a246;
    margin-right: 20rpx;
  }

  .number .num {
    color: #666666;
    width: 70rpx;
  }
</style>